/*
  学习目标：props的两大特点
  1. props可以传递任意数据类型
    1.1 数字 / 字符串 / 数组 / 对象
    1.2 💥函数  💥jsx
  2. props是只读的, 单项数据流
*/

import React, { Component } from 'react';

export default class App extends Component {
  handleAlert = () => {
    alert('123');
  };
  render() {
    return (
      <div>
        {/* 1.1 数字 / 字符串 / 数组 / 对象 */}
        <Header
          name="zs"
          age={18}
          list={[1, 2, 3]}
          person={{ name: 'ls', age: 3 }}
          //  1.2 💥函数
          fn={this.handleAlert}
          // 1.2 💥jsx
          title={<i>我是父亲出来的i标签</i>}
        />

        <Footer list={[1, 2, 3]} name="hello React" />
      </div>
    );
  }
}

function Header({ name, age, list, person, fn, title }) {
  return (
    <>
      <button onClick={fn}>点我</button>
      <div>{title}</div>
    </>
  );
}

function Footer(props) {
  console.log('props  ----->  ', props);
  return (
    <>
      <h2>Footer - {props.list}</h2>
      <button
        onClick={() => {
          props.list.push(4);
        }}
      >
        点我
      </button>
    </>
  );
}
